<template>
 <div class="tree-form">
   <div class="left">
      <div class="e-tree-file">
        <div class="name">包件名称</div>
        <input class="ipt" type="text" placeholder="输入项目编号" />
        <span>
          <img src="@/assets/search.png" />
        </span>
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
   </div>
   <div class="right">
     <div class="top">
       <div class="left">
         <div style="margin-bottom: 10px;">
           <span>上级类别名称</span>
           <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>&emsp;&emsp;类别编号</span>
          <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>&emsp;&emsp;&emsp;&emsp;名称</span>
          <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>Lorem Ipsum</span>
          <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>Lorem Ipsum</span>
          <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>Lorem Ipsum</span>
          <el-input size="mini"></el-input>
          </div>
       </div>
       <div class="right">
           <div style="margin-bottom: 10px;">
           <span>上级类别名称</span>
           <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>&emsp;&emsp;类别编号</span>
          <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>&emsp;&emsp;&emsp;&emsp;名称</span>
          <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>Lorem Ipsum</span>
          <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>Lorem Ipsum</span>
          <el-input size="mini"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span>Lorem Ipsum</span>
          <el-input size="mini"></el-input>
          </div>
       </div>
     </div>
     <div class="footer">
        <div class="left-btn">
           <el-button type="primary" size="mini">新增父级</el-button>
             <el-button type="primary" size="mini">新增子级</el-button>
        </div>
        <div class="right-btn">
             <el-button type="primary" size="mini">保存</el-button>
             <el-button type="primary" size="mini" class="del-btn">删除</el-button>
        </div>
     </div>
   </div>
 </div>
</template>

<script>
export default {
    data () {
        return {
            data: [
                {
                    label: 'Lorem Ipsum1',
                    children: [
                        {
                            label: 'Lorem Ipsum1-1',
                            children: [
                                {
                                    label: 'Lorem Ipsum1-1-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'Lorem Ipsum2',
                    children: [
                        {
                            label: 'Lorem Ipsum2-1',
                            children: [
                                {
                                    label: 'Lorem Ipsum2-1-1',
                                },
                            ],
                        },
                        {
                            label: 'Lorem Ipsum2-2',
                            children: [
                                {
                                    label: 'Lorem Ipsum2-2-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'Lorem Ipsum3',
                    children: [
                        {
                            label: 'Lorem Ipsum3-1',
                            children: [
                                {
                                    label: 'Lorem Ipsum3-1-1',
                                },
                            ],
                        },
                        {
                            label: 'Lorem Ipsum3-2',
                            children: [
                                {
                                    label: 'Lorem Ipsum3-2-1',
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
        }
    },
    computed: {},
    components: {},
    created () {},
    mounted () {},
    methods: {
        handleNodeClick () {},
    },
}
</script>

<style lang="scss" scoped>
.tree-form{
  width: 90%;
  height: 90%;
  margin: auto;
  display: flex;
  margin-top: 10px;
  .left{
    width: 200px;

    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    .name {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-weight: 700;
      background-color: rgb(224, 231, 249);
    }
    .ipt {
      height: 30px;
      border-radius: 5px;
      margin-top: 15px;
      margin-bottom: 15px;
      margin-left: 12px;
      cursor: pointer;
      border: 1px solid #ccc;
    }
    img {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 66px;
      right: 28px;
      cursor: pointer;
    }
    ::placeholder {
      color: #cccc;
      padding-left: 10px;
    }
  }
  .right{
    flex: 1;
    margin-left: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    .top{
      flex: 1;
      display: flex;
      padding-top: 30px;
      .left{
        width: 50%;
        margin-left: 20px;
        border: 0;
      ::v-deep.el-input--mini{
        width: 200px;
        margin-left: 10px;
      }
      span{
        color: rgb(166, 166, 166);
      }
      }
      .right{
        width: 50%;
        border: 0;
        ::v-deep.el-input--mini{
        width: 200px;
        margin-left: 10px;
      }
      }
    }
    .footer{
      height: 50px;
      display: flex;
      justify-content: space-between;
      background-color: rgb(239, 242, 246);
      .left-btn{
        width: 200px;
        margin-left: 10px;

         ::v-deep.el-button--mini{
           width: 80px;
           margin-top: 13px;
            background-color: rgb(122, 168, 24);
        }
      }
      .right-btn{
        width: 200px;
        margin-right: 10px;
        .del-btn{
          background-color: rgb(233, 81, 62) !important;
        }
        ::v-deep.el-button--mini{
           width: 60px;
           margin-top: 13px;
          background-color: rgb(46, 97, 215);
        }
      }
    }
  }
}
</style>